<template>
	<div
		v-if="
			maintenanceTypeList.length > 0 &&
			formData.maintenanceType == '1' && //是否包含维保
			config.businessSource == '2' && // 渠道
			formData.insuranceBuyType == '2' // 购买类型
		">
		<!-- (config.businessSource == '1' || -->
		<!-- details.carType !== '1' || -->
		<div class="box">
			<div class="title">
				<span class="tag"></span>
				维保项目
				<!-- 维保费用 -->
				<!-- <span class="price" v-if="config.businessSource == '2'"> -->
				<!-- 合计：￥{{ -->
				<!-- this.formData.maintenanceType == '1' -->
				<!-- ? format_thousand(formData.maintenanceFee) -->
				<!-- : 0 -->
				<!-- }} -->
				<!-- </span> -->
			</div>
			<div class="">
				<!-- v-if="config.businessSource == '1'" -->
				<!-- <FormItems -->
				<!-- ref="form2" -->
				<!-- v-model="formData" -->
				<!-- :form="formList.maintain" -->
				<!-- :state="state" -->
				<!-- labelWidth="120px"></FormItems> -->
				<el-table :data="formData.maintenanceList" border>
					<el-table-column
						label="类别"
						prop="maintenanceItemTypeStr"
						align="center"></el-table-column>
					<el-table-column
						label="保养范围"
						prop="maintenanceItemDetails"
						align="center"></el-table-column>
					<el-table-column
						label="次数"
						prop="maintenanceCount"
						align="center"></el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
	import FormItems from '@/views/finance/manage/formItems/index.vue';
	import FormItem from '@/views/finance/reimburs/formItem/index.vue';
	export default {
		components: { FormItems, FormItem },
		props: {
			value: {
				required: false,
			},
			state: {
				required: false,
			},
			type: {
				required: false,
			},
		},
		data() {
			return {};
		},
		dicts: ['quota_added_services_type', 'in_su_rance_com_pany'],
		beforeDestroy() {
			if (this.notEmpty(this.details?.productList?.[this.index])) {
				this.$refs.form2?.form_resetFields?.();
			}
		},
		watch: {
			insuranceCompulsoryDiffAmount_dif: {
				handler(val) {
					this.formData.insuranceCompulsoryDiffAmount = val;
				},
				immediate: true,
			},
			insuranceCarvesselDiffAmount_dif: {
				handler(val) {
					this.formData.insuranceCarvesselDiffAmount = val;
				},
				immediate: true,
			},
			insuranceCommercialDiffAmount_dif: {
				handler(val) {
					this.formData.insuranceCommercialDiffAmount = val;
				},
				immediate: true,
			},
			showTable: {
				handler(val) {
					if (val === false) {
						this.initDetaultInsurance();
					}
				},
			},
		},
		inject: ['details_forecast', 'details_config'],
		computed: {
			maintenanceTypeList() {
				let arr = [];
				if (
					this.config?.quotationProductSchemeAttributeOption?.hasMaintenanceOptions?.includes(
						1,
					)
				) {
					arr.push({
						label: '是',
						value: '1',
					});
				}
				if (
					this.config?.quotationProductSchemeAttributeOption?.hasMaintenanceOptions?.includes(
						0,
					)
				) {
					arr.push({
						label: '否',
						value: '2',
					});
				}
				return arr;
			},
			showTable() {
				let result = false;
				let list = this.formData?.insuranceConfList ?? [];
				for (let index = 0; index < list.length; index++) {
					const element = list[index];
					if (
						element.purchaserType == '2' ||
						element.purchaserType == '3'
					) {
						result = true;
						break;
					}
				}
				return result;
			},

			index() {
				return 0;
			},
			formData: {
				get() {
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			config() {
				return this.details_config();
			},
			details() {
				return this.details_forecast();
			},
			insuranceCompulsoryDiffAmount_dif() {
				let res =
					this.formData?.insuranceCompulsoryCurrentAmount -
					this.formData?.insuranceCompulsoryQuondamAmount;

				if (Number.isFinite(res)) {
					return res;
				} else {
					return undefined;
				}
			},
			insuranceCarvesselDiffAmount_dif() {
				let res =
					this.formData?.insuranceCarvesselCurrentAmount -
					this.formData?.insuranceCarvesselQuondamAmount;

				if (Number.isFinite(res)) {
					return res;
				} else {
					return undefined;
				}
			},
			insuranceCommercialDiffAmount_dif() {
				let res =
					this.formData?.insuranceCommercialCurrentAmount -
					this.formData?.insuranceCommercialQuondamAmount;

				if (Number.isFinite(res)) {
					return res;
				} else {
					return undefined;
				}
			},
			totalMaintenanceFee() {
				let money = 0;
				this.formData?.maintenanceList?.map?.(item => {
					if (item.maintenanceCount && item.maintenanceFee) {
						let itemMoney = this.numberRide(
							item.maintenanceCount * 1,
							item.maintenanceFee * 1,
						);
						if (Number.isFinite(itemMoney)) {
							money = this.numberAdd(money, itemMoney);
						}
					}
				});
				let singleFee = this.numberAdd(
					money,
					this.formData?.maintenancePrice ?? 0,
				);
				if (Number.isNaN(singleFee)) return 0;
				let totalFee = this.numberRide(
					singleFee,
					this.formData?.plan?.planTenancyType * 1,
				);
				if (Number.isNaN(totalFee)) return 0;
				return totalFee;
			},
			formList() {
				return {
					insurance: [
						{
							label: '保险公司',
							type: 'select',
							prop: 'insuranceCompanyKey',
							selectList: this.dict.type.in_su_rance_com_pany,
							rules: true,
							show: this.details.carSourceType == '3',
							event: {
								type: 'change',
								cb: row => {
									let item =
										this.dict.type.in_su_rance_com_pany.find(
											e =>
												e.value ==
												row.insuranceCompanyKey,
										);
									if (item) {
										this.formData.insuranceCompanyVal =
											item.label;
									}
								},
							},
						},
						{
							label: '增值服务特约条款',
							type: 'radioGroup',
							radioGroupList:
								this.dict.type.quota_added_services_type,
							prop: 'addedServicesType',
							rules: true,
							show: this.details.carSourceType == '3',
						},
						{
							label: '交强险测算金额(年)',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCompulsoryQuondamAmount',
							state:
								this.type == 'preview'
									? 'readonly'
									: 'disabled',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
							tag: 'price',
						},
						{
							label: '本次交强险金额(年)',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCompulsoryCurrentAmount',
							tag: 'price',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
							event: {
								type: 'change',
								cb: row => {
									if (
										this.notEmpty(
											row.insuranceCompulsoryCurrentAmount,
										)
									) {
										this.formData.planConf.insuranceCompulsoryCurrentAmount_state =
											'changed';
									} else {
										this.formData.planConf.insuranceCompulsoryCurrentAmount_state =
											'';
									}
								},
							},
						},
						{
							label: '交强险差价',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCompulsoryDiffAmount',
							state:
								this.type == 'preview'
									? 'readonly'
									: 'disabled',
							min: -Infinity,
							tag: 'price',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
						},
						{
							label: '车船税测算金额(年)',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCarvesselQuondamAmount',
							state:
								this.type == 'preview'
									? 'readonly'
									: 'disabled',
							tag: 'price',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
						},
						{
							label: '本次车船税金额(年)',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCarvesselCurrentAmount',
							tag: 'price',
							state:
								this.type == 'preview'
									? 'readonly'
									: this.formData.plan.isGreen == 1
									? 'disabled'
									: 'write',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
							event: {
								type: 'change',
								cb: row => {
									if (
										this.notEmpty(
											row.insuranceCarvesselCurrentAmount,
										)
									) {
										this.formData.planConf.insuranceCarvesselCurrentAmount_state =
											'changed';
									} else {
										this.formData.planConf.insuranceCarvesselCurrentAmount_state =
											'';
									}
								},
							},
						},
						{
							label: '车船税差价',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCarvesselDiffAmount',
							state:
								this.type == 'preview'
									? 'readonly'
									: 'disabled',
							tag: 'price',
							min: -Infinity,
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
						},
						{
							label: '商业险测算金额(年)',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCommercialQuondamAmount',
							state:
								this.type == 'preview'
									? 'readonly'
									: 'disabled',
							tag: 'price',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
						},
						{
							label: '本次商业险金额(年)',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCommercialCurrentAmount',
							tag: 'price',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
							event: {
								type: 'change',
								cb: row => {
									if (
										this.notEmpty(
											row.insuranceCommercialCurrentAmount,
										)
									) {
										this.formData.planConf.insuranceCommercialCurrentAmount_state =
											'changed';
									} else {
										this.formData.planConf.insuranceCommercialCurrentAmount_state =
											'';
									}
								},
							},
						},
						{
							label: '商业险差价',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCommercialDiffAmount',
							state:
								this.type == 'preview'
									? 'readonly'
									: 'disabled',
							tag: 'price',
							min: -Infinity,
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
						},
						{
							label: '保险询价附件',
							type: 'upload',
							prop: 'insuranceConsultAccessory',
							prototype: {
								listType: 'text',
								isShowTip: false,
								fileType: [
									'png',
									'jpg',
									'jpeg',
									'doc',
									'xls',
									'ppt',
									'txt',
									'pdf',
								],
							},
							formitemPrototype: {
								style: {
									width: '100%',
								},
							},
							uploadEnd: () => {
								this.$refs.form1.form_clearValidate(
									'insuranceConsultAccessory',
								);
							},
						},
					],
					maintain: [
						{
							label: '维保费用（月）',
							placeholder: '请输入金额',
							tag: 'price',
							type: () => {
								// return "text";
								if (this.formData.maintenanceType == '1') {
									return 'input_number';
								} else {
									return 'text';
								}
							},
							prop: 'maintenancePrice',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
							event: {
								type: 'change',
								cb: row => {
									if (this.notEmpty(row.maintenancePrice)) {
										this.formData.planConf.maintenancePrice_state =
											'changed';
									} else {
										this.formData.planConf.maintenancePrice_state =
											'';
									}
								},
							},
						},
					],
					license: [
						{
							label: '上牌费（台）',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'carLicensePrice',
							// min: this.formData.carLicensePrice_calc ?? 0,
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
							tag: 'price',
							rules: [
								{
									required: true,
									message: '请输入上牌费',
									trigger: 'blur',
								},
							],
							state:
								this.type == 'preview'
									? 'readonly'
									: this.config?.quotationProductSchemeRule
											?.openRegistrationFeeModification ==
									  1
									? 'write'
									: 'disabled',
							event: {
								type: 'change',
								cb: row => {
									if (this.notEmpty(row.carLicensePrice)) {
										this.formData.planConf.carLicensePrice_state =
											'changed';
									} else {
										this.formData.planConf.carLicensePrice_state =
											'';
									}
								},
							},
						},
						{
							label: '限牌城市牌照费（台）',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'carLicenseCityPrice',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
							tag: 'price',
							state:
								this.type == 'preview'
									? 'readonly'
									: this.config?.quotationProductSchemeRule
											?.openLicenseFeeModification == 1
									? 'write'
									: 'disabled',
							event: {
								type: 'change',
								cb: row => {
									if (
										this.notEmpty(row.carLicenseCityPrice)
									) {
										this.formData.planConf.carLicenseCityPrice_state =
											'changed';
									} else {
										this.formData.planConf.carLicenseCityPrice_state =
											'';
									}
								},
							},
						},
						{
							label: '购置税（台）',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'carPurchaseTax',
							tag: 'price',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
						},
					],
				};
			},
		},
		created() {
			this.$emitter.on('initDetaultInsurance', this.initDetaultInsurance);
		},
		mounted() {},

		methods: {
			initDetaultInsurance() {
				this.formData.insuranceCompanyKey = undefined;
				this.formData.insuranceCompanyVal = undefined;
				this.formData.addedServicesType = undefined;
				this.formData.insuranceCompulsoryQuondamAmount = undefined;
				this.formData.insuranceCompulsoryCurrentAmount = undefined;
				this.formData.insuranceCompulsoryDiffAmount = undefined;
				this.formData.insuranceCarvesselQuondamAmount = undefined;
				this.formData.insuranceCarvesselCurrentAmount = undefined;
				this.formData.insuranceCarvesselDiffAmount = undefined;
				this.formData.insuranceCommercialQuondamAmount = undefined;
				this.formData.insuranceCommercialCurrentAmount = undefined;
				this.formData.insuranceCommercialDiffAmount = undefined;
				this.formData.insuranceConsultAccessory = undefined;
			},
			valid() {
				return new Promise(async resolve => {
					let result = true;
					let refs = Object.values(this.$refs);
					for (let index = 0; index < refs?.length; index++) {
						const ref = refs[index];
						if (
							Object.prototype.toString.call(ref) ==
							'[object Array]'
						) {
							for (let i = 0; i < ref.length; i++) {
								const element = ref[i];
								if (element?.valid) {
									let rc = await element?.valid?.();
									result = result && rc;
								}
								if (element?.validate) {
									let rf = await this._valid(ref);
									result = result && rf;
								}
								if (element?.form_validate) {
									let rf = await this._valid(
										ref,
										'form_validate',
									);
									result = result && rf;
								}
							}
						} else {
							if (ref?.valid) {
								let rc = await ref?.valid?.();
								result = result && rc;
							}
							if (ref?.validate) {
								let rf = await this._valid(ref);
								result = result && rf;
							}
							if (ref?.form_validate) {
								let rf = await this._valid(
									ref,
									'form_validate',
								);
								result = result && rf;
							}
						}
					}

					resolve(result);
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		margin: 20px;
		padding: 20px;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 0px 1px 3px 1px rgba(0, 28, 54, 0.11);
		.title {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 22px;
			padding-top: 15px;
			padding-bottom: 15px;
			// border-bottom: 1px solid #e9e9e9;
			display: flex;
			align-items: center;
			.tag {
				width: 8px;
				height: 8px;
				background-color: #1890ff;
				border-radius: 100%;
				margin-right: 10px;
			}
			.price {
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1890ff;
				line-height: 20px;
				margin-left: 20px;
			}
		}
	}
</style>
